<!-- 投诉建议列表 -->
<template>
	<view v-show="show">
		<view class="mask"></view>
		<view class="list-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>投诉建议</div>
				<div class="close-item hoverClass" @click.stop="hideFn">
					<img class="close" src="../static/icon-close.png" mode="">
				</div>
			</div>

			<view class="options-container">

				<view class="option-box" v-if="userType == 1">
					<view class="option-name">村委名称</view>
					<view class="select-box">
						<view class="selected-box" @click="showProjectList = !showProjectList"
							:style="{ color: selectProjectListName.join(',') ? '#fff' : 'rgba(255, 255, 255, .3)' }">
							{{ selectProjectListName.join(',') ? selectProjectListName.join(',') : '请选择(多选)' }}
						</view>
						<scroll-view v-if="showProjectList" scroll-y class="select-options">
							<view v-for="(item, index) of projectListTemp" :class="{ 'selected': item.selected }"
								@click="selectedProjectFn(item, index)">{{ item.villageName }}</view>
						</scroll-view>
					</view>
				</view>

				<view class="option-box" v-if="userType == 2 || userType == 3">
					<view class="option-name">关键字</view>
					<input text="text" v-model="keyword" placeholder="请输入内容描述"
						placeholder-style="color: rgba(255, 255, 255, .3)" />
				</view>

				<view class="option-box">
					<view class="option-name">状态</view>
					<view class="select-box">
						<view class="selected-box" @click="showTypeList = !showTypeList"
							:style="{ color: selectTypeListName != '全部' ? '#fff' : 'rgba(255, 255, 255, .3)' }">
							{{ selectTypeListName != '全部' ? selectTypeListName : '请选择' }}
						</view>
						<scroll-view v-if="showTypeList" scroll-y class="select-options">
							<view v-for="(item, index) of typeList"
								:class="{ 'selected': item.key == selectTypeListId }" @click="selectTypeFn(index)">{{
					item.value }}</view>
						</scroll-view>
					</view>
				</view>

				<view class="option-box">
					<view class="option-name">分类名称</view>
					<view class="select-box">
						<view class="selected-box" @click="showInvestigatetreatList = !showInvestigatetreatList"
							:style="{ color: selectInvestigatetreatListName != '全部' ? '#fff' : 'rgba(255, 255, 255, .3)' }">
							{{ selectInvestigatetreatListName != '全部' ? selectInvestigatetreatListName : '请选择' }}
						</view>
						<scroll-view v-if="showInvestigatetreatList" scroll-y class="select-options">
							<view v-for="(item, index) of investigatetreatList"
								:class="{ 'selected': item.dictValue == selectInvestigatetreatListId }"
								@click="selectInvestigatetreatFn(index)">{{ item.dictLabel }}</view>
						</scroll-view>
					</view>
				</view>

				<view class="option-box">
					<view class="option-name">反馈时间</view>
					<el-date-picker class="pick-time" v-model="submitDate" type="month" value-format="yyyy-MM-dd"
						popper-class="date-picker" placeholder="请选择日期" />
				</view>

				<view class="btn-list">
					<view class="btn" @click="reset">重置</view>
					<view class="btn" @click="searchList">搜索</view>
				</view>
			</view>

			<view class="list" v-if="userType == 1">
				<view class="liat-nav">
					<view>序号</view>
					<view>村委名称</view>
					<view>内容描述</view>
					<view>分类名称</view>
					<view>状态</view>
					<view>联系人</view>
					<view>反馈时间</view>
					<view>预计完成时间</view>
					<view>最后跟进人员</view>
					<view>最后跟进时间</view>
					<view>操作</view>
				</view>
				<view class="list-item" v-if="list.length" v-for="(item, index) of list" :key="index">
					<view>{{ item.serialNumber }}</view>
					<view>{{ item.villageName }}</view>
					<view>{{ item.content }}</view>
					<view><text class="tag">{{ item.subTypeStr }}</text></view>
					<view
						:class="{'color-o':item.status == 0,'color-w':item.status == 1,'color-r':item.status == 2,'color-b':item.status == 3,}">
						{{ item.statusName }}</view>
					<view>{{ item.userName }} {{ item.phone }}</view>
					<view>{{ item.submitDateStr }}</view>
					<view>{{ item.planCompleteTimeStr ? item.planCompleteTimeStr : '-' }}</view>
					<view>{{ item.lastFollowUserName ? item.lastFollowUserName : '-' }}</view>
					<view>{{ item.lastFollowTimeStr ? item.lastFollowTimeStr : '-' }}</view>
					<view class="color-b" @click="showDetailFn(item.csId)">查看详情</view>
				</view>
				<view class="no-list" v-if="list.length == 0">暂无数据</view>
			</view>
			
			<view class="list list2" v-if="userType == 2">
				<view class="liat-nav">
					<view>序号</view>
					<view>内容描述</view>
					<view>分类名称</view>
					<view>状态</view>
					<view>联系人</view>
					<view>反馈时间</view>
					<view>预计完成时间</view>
					<view>最后跟进人员</view>
					<view>最后跟进时间</view>
					<view>操作</view>
				</view>
				<view class="list-item" v-if="list.length" v-for="(item, index) of list" :key="index">
					<view>{{ item.serialNumber }}</view>
					<view>{{ item.content }}</view>
					<view><text class="tag">{{ item.subTypeStr }}</text></view>
					<view
						:class="{'color-o':item.status == 0,'color-w':item.status == 1,'color-r':item.status == 2,'color-b':item.status == 3,}">
						{{ item.statusName }}</view>
					<view>{{ item.userName }} {{ item.phone }}</view>
					<view>{{ item.submitDateStr }}</view>
					<view>{{ item.planCompleteTimeStr ? item.planCompleteTimeStr : '-' }}</view>
					<view>{{ item.lastFollowUserName ? item.lastFollowUserName : '-' }}</view>
					<view>{{ item.lastFollowTimeStr ? item.lastFollowTimeStr : '-' }}</view>
					<view class="color-b" @click="showDetailFn(item.csId)">查看详情</view>
				</view>
				<view class="no-list" v-if="list.length == 0">暂无数据</view>
			</view>
			
			<view class="list list3" v-if="userType == 3">
				<view class="liat-nav">
					<view>序号</view>
					<view>内容描述</view>
					<view>分类名称</view>
					<view>状态</view>
					<view>联系人</view>
					<view>反馈时间</view>
					<view>最后跟进人员</view>
					<view>最后跟进时间</view>
					<view>操作</view>
				</view>
				<view class="list-item" v-if="list.length" v-for="(item, index) of list" :key="index">
					<view>{{ item.serialNumber }}</view>
					<view>{{ item.content }}</view>
					<view><text class="tag">{{ item.subTypeStr }}</text></view>
					<view
						:class="{ 'color-o': item.status == 0, 'color-w': item.status == 1, 'color-r': item.status == 2, 'color-b': item.status == 3, }">
						{{ item.statusName }}
					</view>
					<view>{{ item.userName }} {{ item.phone }}</view>
					<view>{{ item.submitDateStr }}</view>
					<view>{{ item.lastFollowUserName ? item.lastFollowUserName : '-' }}</view>
					<view>{{ item.lastFollowTimeStr ? item.lastFollowTimeStr : '-' }}</view>
					<view class="color-b" @click="showDetailFn(item.csId)">查看详情</view>
				</view>
				<view class="no-list" v-if="list.length == 0">暂无数据</view>
			</view>
			
			<!-- 分页 -->
			<view class="pages-box">
				<view class="pages">
					<view class="pages-total">共{{ total }}个结果</view>
					<Pagination class=" hoverClass" :total="total" :pageSize="pageSize" :nowPage="nowPage"
						@change="change">
					</Pagination>
					<view class="pagesSize">
						<view class="">前往</view>
						<input type="number" v-model="nowPageNum" @confirm="changeSearch()">
						<view class="">页</view>
					</view>
				</view>
			</view>
		</view>

		<TSJYDetail :show="showDetail" :id="csId" :isOperation="1" @hide="showDetail = false" :userType="userType"></TSJYDetail>
	</view>
</template>

<script>
	import Pagination from "@/components/bwm-pagination/bwm-pagination.vue" // 分页组件
	import TSJYDetail from '@/components/TSJYDetail'


	export default {
		name: "TSJYList",
		components: {
			Pagination,
			TSJYDetail,
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			projectList: {
				type: Array,
				default: []
			},
			userType: {
				type: Number,
				default: 0
			},
			type: {
				type: Number,
				default: -1
			},
			villageId: {
				type: Number,
				default: 0
			},
			year: {
				type: Number,
				default: -1,
			},
			month: {
				type: Number,
				default: -1,
			},
			noDate: {
				type: Boolean,
				default: true,
			},
		},
		watch: {
			projectList: {
				handler(newValue, oldValue) {
					const temp = newValue
					temp.forEach(item => {
						item.selected = false
					})
					this.projectListTemp = temp
				},
				deep: true
			},
			type: {
				handler(newValue, oldValue) {
					this.selectTypeListId = newValue
					this.selectTypeListName = this.typeList.find((item, index) => {
						if (item.key == newValue) {
							return item.value
						}
					}).value
				},
				deep: true
			},
			selectTypeListId: {
				handler(n, o) {
					// this.getList()
				},
				deep: true
			},
			villageId: {
				handler(n, o) {
					this.selectProjectListId = [n]
				},
				deep: true
			},
			show: {
				handler(newValue, oldValue) {
					if (newValue) {
						if(this.noDate) {
							this.submitDate = ''
						} else {
							this.submitDate = new Date(this.year + '-' + this.month)
						}
						this.getList()
					}
				},
				deep: true
			},
		},
		data() {
			return {
				url: getApp().globalData.url,
				list: [],

				keyword: '',

				showProjectList: false,
				selectProjectListName: [],
				selectProjectListId: [],
				projectListTemp: [],

				showTypeList: false,
				selectTypeListName: '全部',
				selectTypeListId: -1,
				typeList: [{
						key: -1,
						value: '全部',
					},
					{
						key: 0,
						value: '待指派',
					},
					{
						key: 1,
						value: '跟进中',
					},
					{
						key: 2,
						value: '已逾期',
					},
					{
						key: 3,
						value: '已完成',
					},
				],

				showInvestigatetreatList: false,
				selectInvestigatetreatListName: '全部',
				selectInvestigatetreatListId: -1,
				investigatetreatList: [],

				submitDate: '',

				total: 0,
				pageSize: 16,
				nowPage: 1,

				nowPageNum: '',

				showDetail: false,
				csId: 0,
			};
		},
		mounted() {
			this.getInvestigatetreatOptions()
			if(this.userType == 2) {
				this.typeList = [{
						key: -1,
						value: '全部',
					},
					{
						key: 0,
						value: '待指派',
					},
					{
						key: 1,
						value: '跟进中',
					},{
						key: 3,
						value: '已完成',
					},
				]
			}
		},
		methods: {
			// 获取村委列表
			getList(options) {
				let year = ''
				let month = ''
				if(Object.prototype.toString.call(this.submitDate) === '[object Date]') {
					year = this.submitDate.getFullYear()
					month = this.submitDate.getMonth() + 1
				} else if(this.submitDate == '') {
					year = -1
					month = -1
				} else {
					year = Number(this.submitDate.split('-')[0])
					month = Number(this.submitDate.split('-')[1])
				}
				uni.request({
					url: this.url + 'api/largescreen/SuggestMX',
					method: 'POST',
					data: {
						pageNum: this.nowPage,
						pageSize: this.pageSize,
						userType: this.userType, // 用户类型（1：运营，2：村委，99：村民）
						villageId: this.villageId == 0 ? this.selectProjectListId.join(',') : this.villageId, // 村委
						type: this.selectTypeListId, // 状态 0（待处理）、1（跟进中）、2（已逾期） 、3（已完成）
						subType: this.selectInvestigatetreatListId, // 分类
						// submitDate: this.submitDate, // 反馈时间
						year, // 年
						month, // 月
						isOperation: this.userType == 1 ? 1 : null, // 判断是否运营端
						suggType: 1, // 投诉建议 = 1,查处 = 2,
						keyword: this.keyword,
					},
					success: e => {
						if (e.data.code == 200) {
							// console.log(e.data.data)
							this.list = e.data.data.result
							// console.log(e.data)
							this.total = e.data.data.totalNum
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			showDetailFn(id) {
				this.csId = id,
					this.showDetail = true
			},
			change(nowPage) {
				this.nowPage = nowPage;
				this.getList()
			},
			changeSearch() { // 获取当前分页
				this.nowPage = parseInt(this.nowPageNum);
				this.getList()
			},
			selectedProjectFn(item, index) { // 选择村委
				console.log(item)
				this.projectListTemp[index].selected = !this.projectListTemp[index].selected
				this.selectProjectListId.push(item.villageId)
				this.selectProjectListId = []
				this.selectProjectListName = []
				this.projectListTemp.forEach(item => {
					if (item.selected) {
						this.selectProjectListId.push(item.villageId)
						this.selectProjectListName.push(item.villageName)
					}
				})
				this.showProjectList = false
			},
			selectTypeFn(index) { // 选择类型
				this.nowPage = 1
				this.selectTypeListId = this.typeList[index].key
				this.selectTypeListName = this.typeList[index].value
				this.showTypeList = false
			},
			selectInvestigatetreatFn(index) { // 选择分类名称
				this.selectInvestigatetreatListId = Number(this.investigatetreatList[index].dictValue)
				this.selectInvestigatetreatListName = this.investigatetreatList[index].dictLabel
				this.showInvestigatetreatList = false
			},

			getInvestigatetreatOptions() { // 获取
				uni.request({
					url: this.url + 'system/dict/data/types',
					method: 'POST',
					data: [{
						columnName: "subTypeOptions",
						dictType: "investigatetreat_type"
					}],
					success: e => {
						if (e.data.code == 200) {
							this.investigatetreatList = [{
									createBy: "admin",
									createTime: "2023-10-12 10:48:26",
									cssClass: "",
									dictCode: -1,
									dictLabel: "全部",
									dictSort: 0,
									dictType: "investigatetreat_type",
									dictValue: "-1",
									isDefault: null,
									listClass: "primary",
									remark: "16, 132, 254",
									status: "0",
									updateTime: "2024-01-24 12:29:32"
								},
								...e.data.data[0].list
							]
						}
					},
					fail: e => {
						console.log(e)
					}
				})

			},
			searchList() {
				this.nowPage = 1
				this.getList()
			},
			reset() {
				this.nowPage = 1
				this.selectProjectListId = []
				this.selectProjectListName = []
				this.projectListTemp.forEach(item => item.selected = false)
				this.selectTypeListId = -1
				this.selectTypeListName = '全部'
				this.selectInvestigatetreatListId = -1
				this.selectInvestigatetreatListName = '全部'
				this.submitDate = ''
				this.nowPageNum = ''
				this.keyword = ''
				this.getList()
				this.$emit('reset')
			},
			hideFn() {
				this.nowPage = 1
				this.selectProjectListId = []
				this.selectProjectListName = []
				this.projectListTemp.forEach(item => item.selected = false)
				this.selectTypeListId = -1
				this.selectTypeListName = '全部'
				this.selectInvestigatetreatListId = -1
				this.selectInvestigatetreatListName = '全部'
				this.submitDate = ''
				this.nowPageNum = ''
				this.keyword = ''
				this.$emit('reset')
				this.$emit('hideTsjy')
			}
		}
	}
</script>

<style lang="scss">
	@import url(@/static/css/TSJYList.scss);
	.list2 {
		.liat-nav,
		.list-item {
			view:nth-child(1) {
				width: 60px !important;
			}
			view:nth-child(2) {
				width: 330px !important;
			}
			view:nth-child(3),
			view:nth-child(4){
				width: 120px !important;
				padding-left: 0 !important;
				text-align: center !important;
			}
			view:nth-child(5),
			view:nth-child(6),
			view:nth-child(7),
			view:nth-child(9){
				width: 180px !important;
			}
			view:nth-child(8) {
				width: 120px !important;
			}
			view:nth-child(10) {
				width: 100px !important;
			}
		}
	}
	.list3 {
		.liat-nav,
		.list-item {
			view:nth-child(1) {
				width: 60px !important;
			}
			view:nth-child(2) {
				width: 370px !important;
			}
			view:nth-child(3),
			view:nth-child(4){
				width: 120px !important;
				padding-left: 0 !important;
				text-align: center !important;
			}
			view:nth-child(5),
			view:nth-child(6),
			view:nth-child(7),
			view:nth-child(8){
				width: 200px !important;
			}
			view:nth-child(9) {
				width: 100px !important;
			}
		}
	}
</style>